<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page session="true"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Consultar Propiedad</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/resources/css/jquery.mobile-1.4.2.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/resources/css/app.css?v=0.2.11">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/resources/css/dark-hive/jquery-ui-1.10.4.custom.min.css">
<script
	src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCP-0bSxwoVNwRjCnRIWYwFauJ0sNctxI0&sensor=false"></script>
<script
	src="${pageContext.request.contextPath}/resources/js/jquery-1.11.0.min.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/js/jquery.mobile-1.4.2.min.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/js/jquery.validate.min.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/js/google-map-consultarPropiedad.js?v=0.2.11"></script>

<!-- <script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=false"></script> -->
<!-- <script type="text/javascript"
	src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/data.json"></script>
<script type="text/javascript"
	src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script> -->

<style>
.error {
	color: red;
}
</style>
</head>
<body>
	<div data-role="page" id="page1" data-ajax="false">
		<div data-role="header">
			<h1>Datos de la Propiedad</h1>
		</div>
		<div role="main" class="ui.content">
			<div class="centered-content">

				<!-- DIV COLLAPSABLE DATOS -->
				<div data-role="collapsible">
					<h4>Datos de la propiedad</h4>
					<div role="main" class="ui-content">
						<div class="centered-content">


							<table class="outputTable">
								<tr>
									<td>Propietario :</td>
									<td>
										<p>
											<a
												href="${pageContext.request.contextPath}/consultar_propietario/${propiedad.propietario.id}"
												data-rel="dialog" data-transition="pop">${propiedad.propietario.nombre}</a>
										</p>
									</td>
								</tr>
								<tr>
									<td>Disponible :</td>
									<td>${propiedad.disponible?'Si':'No'}</td>
								</tr>
								<tr>
									<td>Venta o Arriendo :</td>
									<td>${propiedad.venta?'Venta':'Arriendo'}</td>
								</tr>
								<tr>
									<td>Nivel de interés del Cliente :</td>
									<td><c:choose>
											<c:when test="${propiedad.percepcion==1}">Baja</c:when>
											<c:when test="${propiedad.percepcion==2}">Media</c:when>
											<c:otherwise>
						Alta
						</c:otherwise>
										</c:choose></td>
								</tr>
								<tr>
									<td>Número :</td>
									<td>${propiedad.numero}</td>
								</tr>
								<tr>
									<td>Tipo de Propiedad :</td>
									<td>${propiedad.tipoPropiedad.nombre}</td>
								</tr>
								<tr>
									<td>Metros Cuadrados :</td>
									<td><fmt:formatNumber value="${propiedad.metrosCuadrados}"
											maxFractionDigits="2" minFractionDigits="0"></fmt:formatNumber>
									</td>
								</tr>
								<tr>
									<td>Valor:</td>
									<td>${propiedad.valorEnUf?'UF':'$'}&nbsp;<c:if
											test="${propiedad.valorEnUf}">
											<c:set var="decimales">2</c:set>
										</c:if> <c:if test="${not propiedad.valorEnUf}">
											<c:set var="decimales">0</c:set>
										</c:if> <fmt:formatNumber value="${propiedad.valor}"
											maxFractionDigits="${decimales}"
											minFractionDigits="${decimales}"></fmt:formatNumber>
									</td>
								</tr>
								<tr>
									<td>Dirección :</td>
									<td>${propiedad.direccion}</td>
								</tr>
								<tr>
									<td>Comuna :</td>
									<td><input type="hidden" id="comuna"
										value="${propiedad.comuna.nombre}">${propiedad.comuna.nombre}</td>
								</tr>
								<tr>
									<td>Fecha de ingreso de la Propiedad :</td>
									<td><fmt:formatDate value="${propiedad.fechaIngreso}"
											pattern="dd/MM/yyyy HH:mm" timeZone="GMT-4" /></td>
								</tr>
								<tr>
									<td>Amoblada:</td>
									<td>${propiedad.amoblada?'Si':'No'}</td>
								</tr>
								<tr>
									<td colspan="2">Detalle de la Propiedad :</td>
								</tr>
								<tr>
									<td colspan="2">${propiedad.detalle}</td>
								</tr>

							</table>


							<input type="hidden" value="${propiedad.latitud}" id="latitud"
								name="latitud" /></input> <input type="hidden"
								value="${propiedad.longitud}" id="longitud" name="longitud" />
						</div>
					</div>
				</div>


				<!-- DIV collapsible VISITAS -->
				<div data-role="collapsible">
					<h4>Historial de Visitas</h4>
					<div role="main" class="ui-content">
						<div class="centered-content">
							<h2>Visitas de esta propiedad</h2>

							<table class="outputTable">
								<tr>
									<th>Fecha de Registro</th>
									<th>Cliente</th>
									<th>Detalle</th>
								</tr>
								<c:forEach items="${propiedad.visitas}" var="visita">
									<tr>
										<td><fmt:formatDate value="${visita.fechaRegistro}"
												pattern="dd/MM/yyyy HH:mm" timeZone="GMT-4" /></td>
										<td><p>
												<a
													href="${pageContext.request.contextPath}/consultar_cliente/${visita.cliente.id}"
													data-rel="dialog" data-transition="pop">${visita.cliente.nombre}</a>
											</p></td>
										<td><p>
												<a
													href="${pageContext.request.contextPath}/consultar_visita/${visita.id}"
													class="ui-btn ui-mini" data-rel="dialog"
													data-transition="pop">Detalle</a>
											</p></td>
									</tr>
								</c:forEach>
							</table>
						</div>
					</div>
				</div>
				<!-- FIN DIV COLAPSABLE VISITAS -->




				<div id="map-canvas"></div>



			</div>
		</div>

	</div>
</body>
</html>
